<template>
  <div class="border_shouye">
    <div class="btn_diyi" style="width:100%;height:150px;">
      <div class="btn-1">
        <div class="btn_left">
          <i class="el-icon-star-on" style="font-size:30px;margin-top:37px;margin-left:8px;"></i>
        </div>
        <div class="btn_right">
          <h5>成交订单</h5>
          <h2>15789</h2>
        </div>
      </div>
      <div class="btn-1">
        <div class="btn_left" style="background-color:#52c0df;">
          <i class="el-icon-info" style="font-size:30px;margin-top:37px;margin-left:8px;"></i>
        </div>
        <div class="btn_right">
          <h5>最新订单</h5>

          <h2>50</h2>
        </div>
      </div>
      <div class="btn-1">
        <div class="btn_left" style="background-color:#af94e5;">
          <i class="el-icon-goods" style="font-size:30px;margin-top:37px;margin-left:8px;"></i>
        </div>
        <div class="btn_right">
          <h5>广告管理</h5>
          <h2>2000+</h2>
        </div>
      </div>
      <div class="btn-1">
        <div class="btn_left" style="background-color:#6cc9c1;">
          <i class="el-icon-warning" style="font-size:30px;margin-top:37px;margin-left:8px;"></i>
        </div>
        <div class="btn_right">
          <h5>最新广告</h5>
          <h2>15</h2>
        </div>
      </div>
    </div>
    <div class="btn_dier">
      <div class="conterent_left">
        <div class="conterent_1" style="margin-top:20px">
          <div class="conterent-left">
            <h3 style="color:#f4a082;">最近登录</h3>
          </div>
          <div class="conterent-right">
            <div class="right_one">往期登录</div>
            <div class="right_two">更多记录</div>
          </div>
        </div>
        <div class="conterent_2">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="90"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="conterent_right">
        <div class="conterent_1" style="margin-top:20px">
          <div class="conterent-left">
            <h4 style="color:#f4a082;">最新广告</h4>
          </div>
          <div class="conterent-right">
            <div class="right_two2">更多广告</div>
          </div>
        </div>
        <div class="conterent_2">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="80"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="btn_disan">
      <div class="conterent_1" style="margin-top:20px">
        <div class="conterent-left">
          <h4 style="color:#f4a082;">最新订单</h4>
        </div>
        <div class="conterent-right">
          <div class="right_two3">更多订单</div>
        </div>
      </div>
      <div class="conterent_2">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="100"></el-table-column>
          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style  scoped>
.btn-1 {
  width: 20%;
  height: 100px;
  background-color: #f9f3f3;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 30px;
  float: left;
}
.btn_left {
  background-color: #fd8461;
  width: 30%;
  height: 100px;
  border-radius: 5px;
  float: left;
}
.btn_right {
  width: 70%;
  height: 100px;
  text-align: center;
  background-color: #f0ecf1;

  float: left;
  line-height: 30px;
}
.btn_right h5 {
  margin-top: 20px;
}
.conterent_left {
  width: 55%;
  height: 400px;
  /* background-color: azure; */
  /* margin-left: 20px; */
  float: left;
}
.conterent_1 {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  line-height: 50px;
}
.conterent-left {
  margin-left: 20px;
  float: left;
  width: 20%;
  /* background-color: blanchedalmond; */
  height: 40px;
  margin-top: 5px;
  text-align: center;
}
.btn_dier {
  width: 100%;
  height: 400px;
  margin-top: 20px;
  overflow: hidden;
  /* background-color: red; */
}
.conterent-right {
  margin-left: 60%;
  width: 40%;
  background-color: blue;
}
.right_one {
  width: 40%;
  height: 40px;
  background-color: darkgray;
  float: left;
  border-radius: 5px;
  text-align: center;
  margin-top: 8px;
  line-height: 40px;
}
.right_two {
  width: 40%;
  height: 40px;
  background-color: #ff8064;
  float: left;
  border-radius: 5px;
  text-align: center;
  margin-top: 8px;
  line-height: 40px;
  margin-left: 20px;
}
.conterent_2 {
  /* background-color: floralwhite; */
  width: 100%;
  height: 340px;
}
.conterent_right {
  width: 40%;
  height: 400px;
  /* background-color: azure; */
  margin-left: 20px;
  float: left;
  margin-left: 2%;
}
.right_two2 {
  width: 40%;
  height: 40px;
  /* background-color: #ff8064; */
  float: right;
  border-radius: 5px;
  text-align: center;
  margin-top: 5px;
  line-height: 40px;
  margin-right: 20px;
  font-size: 10px;
}
.btn_disan {
  width: 95%;
  height: 400px;
  /* background-color: green; */
  margin-top: 60px;
  margin-left: 20px;
}
.right_two3 {
  width: 40%;
  height: 40px;
  /* background-color: #ff8064; */
  float: right;
  border-radius: 5px;
  text-align: center;
  margin-top: 10px;
  line-height: 40px;
  margin-right: 20px;
  font-size: 14px;
}
</style>